<template>
  <div ref="chart4" class="countbox"></div>
</template>
<script>
import ResizeChart from "@/components/mixin/ResizeChart";
export default {
  data() {
    return {
      myChart: null,
      option: {
        color: [
          "#3fb1e3",
          "#6be6c1",
          "#626c91",
          "#a0a7e6",
          "#c4ebad",
          "#96dee8",
         "#FFFACD"
        ],
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "镇村一体进度阶段完成百分比",
          left: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: "阶段完成百分比",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "组织准备" },
              { value: 735, name: "技术准备" },
              { value: 580, name: "驻村调查" },
              { value: 484, name: "规划编制" },
              { value: 300, name: "成果审批备案" },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
  mixins: [ResizeChart],
  methods: {
    initEchartMap() {
      this.myChart = this.$echarts.init(this.$refs.chart4);
      window.addEventListener("resize", this.myChart.resize);
      this.myChart.setOption(this.option);
    },
    changeMap(data) {
      this.option.series[0].data = data;
      this.myChart.setOption(this.option);
      this.myChart.hideLoading();
    },
  },
};
</script>
<style lang="scss" scoped>
.countbox {
  margin: 10px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  position: relative;
}
</style>